<template>
  <div class="box">
    <!-- 搜索重置 -->
    <div class="search">
      <div class="search_input">
        <p>
          <span>名称：</span>
          <input
            type="text"
            placeholder="请输入页面名称"
            v-model="name_value"
          />
        </p>
        <p>
          <span>路径：</span>
          <input type="text" placeholder="请输入页面内容" />
        </p>
        <p>
          <span>状态：</span>
          <a-select
            v-model:value="value"
            show-search
            style="width: 200px"
            :options="options"
            :filter-option="filterOption"
            @change="handleChange"
          ></a-select>
        </p>
      </div>

      <div class="search_btn">
        <a-button type="primary" @click="click_search">搜索</a-button>
        <a-button @click="click_rest">重置</a-button>
      </div>
    </div>

    <!-- 分页内容 -->
    <div class="count">
      <!-- 新建  -->
      <div class="count_add">
        <!-- 遮罩层 -->
        <van-overlay :show="show">
          <div class="wrapper">
            <div class="block">
              <div style="display: flex; justify-content: space-between">
                <b></b>
                <b
                  @click="show = false"
                  style="font-size: 26px; margin: 10px 20px"
                  >x</b
                >
              </div>
              <div style="ipt">
                <p>
                  <span>页面</span>
                  <input
                    type="text"
                    placeholder="请输入页面名称"
                    v-model="vale_one"
                  />
                </p>
                <p>
                  <span>内容</span>
                  <input
                    type="text"
                    placeholder="请输入内容"
                    v-model="value_two"
                  />
                </p>
                <p>
                  <span>描述</span>
                  <input
                    type="text"
                    placeholder="请输入描述内容"
                    v-model="value_three"
                  />
                </p>
              </div>
              <van-button
                type="primary"
                style="float: right; margin: 0 20px"
                @click="add_confirm"
                >确定</van-button
              >
            </div>
          </div>
        </van-overlay>
        <b></b>
        <van-button type="primary" text="添加" @click="show = true" />
      </div>

      <!--表格 -->
      <div class="table">
        <div style="margin-bottom: 16px">
          <span style="margin-left: 8px">
            <template v-if="hasSelected">
              {{ `选中：${selectedRowKeys.length}个 ` }}
            </template>
          </span>
          <span style="margin-left: 8px">
            <template v-if="hasSelected">
              <a-button type="primary" danger @click="click_delte"
                >删除</a-button
              >
            </template>
          </span>
        </div>
        <a-table
          bordered="true"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :columns="columns"
          :data-source="states.list"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref, computed, reactive, toRefs } from 'vue'
import axios from 'axios'

// 表格的数据
const columns = [
  {
    title: '页面名',
    dataIndex: 'name'
  },
  {
    title: '内容',
    dataIndex: 'url'
  },
  {
    title: '状态',
    dataIndex: 'statu'
  },
  {
    title: '发布时间',
    dataIndex: 'date'
  },

  {
    title: '描述',
    dataIndex: 'text'
  }
]

export default defineComponent({
  name: 'pageVivs',
  setup() {
    let states = reactive({
      list: [],
      data: [],
      name_value: '',
      vale_one: '',
      value_two: '',
      value_three: ''
    })

    // 下拉框
    const options = ref([
      {
        value: '已发布',
        label: '已发布'
      },
      {
        value: '草稿',
        label: '草稿'
      }
    ])

    //  请求数据
    const getList = async () => {
      await axios.get('http://127.0.0.1:7001/api/get_page').then((res) => {
        let newlist = res.data.data.map((item) => {
          return { ...item, key: item.id }
        })

        states.list = newlist
      })
    }
    //初始化调用
    getList()
    //监听事件

    // select下拉框
    const handleChange = async (value) => {
      if (value == '') {
        getList()
      } else {
        await axios.get('http://127.0.0.1:7001/api/get_page').then((res) => {
          let newlist = res.data.data.map((item) => {
            return { ...item, key: item.id }
          })

          states.list = newlist
        })
        const newList = states.list.filter((v) => {
          return v.statu.includes(value)
        })
        states.list = newList
      }
    }

    const filterOption = (input, option) => {
      return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }

    // 表格
    const state = reactive({
      selectedRowKeys: [],
      // Check here to configure the default column
      loading: false
    })
    const hasSelected = computed(() => state.selectedRowKeys.length > 0)
    const start = () => {
      state.loading = true
      setTimeout(() => {
        state.loading = false
        state.selectedRowKeys = []
      }, 1000)
    }
    const onSelectChange = (selectedRowKeys) => {
      console.log('selectedRowKeys changed666', selectedRowKeys)
      state.selectedRowKeys = selectedRowKeys
      states.data = selectedRowKeys
    }

    // 搜索
    const click_search = async () => {
      if (states.name_value == '') {
        getList()
      } else {
        await axios.get('http://127.0.0.1:7001/api/get_page').then((res) => {
          let newlist = res.data.data.map((item) => {
            return { ...item, key: item.id }
          })

          states.list = newlist
        })
        const newList = states.list.filter((v) => {
          return v.name.includes(states.name_value)
        })
        states.list = newList
      }
    }

    // 重置
    const click_rest = () => {
      states.name_value = ''
      state.selectedRowKeys = false
      getList()
    }

    //选中点击删除
    const click_delte = async () => {
      if (confirm('确认删除吗')) {
        await axios
          .post('http://127.0.0.1:7001/api/del_page', {
            multipleSelection: states.data
          })
          .then((res) => {
            state.selectedRowKeys = false
            getList()
          })
      } else {
        console.log('取消删除')
      }
    }

    // 遮罩层
    const show = ref(false)

    //添加
    const add_confirm = async () => {
      show.value = false
      if (
        states.vale_one == '' ||
        states.vale_one == '' ||
        states.vale_one == ''
      ) {
        alert('输入内容不能为空')
      } else {
        let id = Math.floor(Math.random() * 90) + 10
        const count = {
          name: states.vale_one,
          text: states.value_two,
          url: states.value_three,
          sequence: id,
          statu: '已发布'
        }

        await axios
          .post('http://127.0.0.1:7001/api/publish_page', { count })
          .then((res) => {
            getList()
            alert('添加成功')
          })
      }
    }

    return {
      value: ref(undefined),
      filterOption,

      handleChange,
      options,
      show,
      columns,
      hasSelected,
      click_delte,
      ...toRefs(state),
      add_confirm,
      start,
      onSelectChange,
      states,
      click_search,
      click_rest,
      ...toRefs(states)
    }
  }
})
</script>
<style>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(238, 238, 238);
  justify-content: space-between;
}

/* 搜索框 */
.search {
  width: 100%;
  height: 90px;
  background: rgb(228, 244, 250);
  display: flex;
  justify-content: space-between;
}
.search_input {
  display: flex;
}
.search_input p {
  width: 400px;
  margin: 20px 30px;
}
.search_input p input {
  width: 300px;
  height: 36px;
  border: 1px solid #ccc;
  text-indent: 20px;
  outline: 0;
}

.search_btn {
  margin: 20px 0;
}

.count {
  width: 100%;
  height: 660px;
  background: #fff;
}

.count_add {
  display: flex;
  justify-content: space-between;
  height: 50px;
  margin-top: 10px;
}
.table {
  margin-top: -50px;
}

.wrapper {
  position: relative;
  height: 100%;
}

/* 遮罩层 */
.block {
  position: absolute;
  top: 30%;
  left: 40%;
  width: 520px;
  height: 450px;
  background-color: #fff;
  z-index: 99;
  border-radius: 10px;
}
.block .ipt {
  margin: 20px 0;
}
.block p {
  width: 100%;
  height: 60px;
  display: flex;
  margin: 30px;
  font-size: 16px;
}
.block p input {
  outline: 0;
  border: 1px solid #ccc;
  width: 330px;
  height: 40px;
  margin: 0 20px;
  text-indent: 20px;
  font-size: 15px;
}
.block p span {
  display: inline-block;
  margin: 10px 0;
  width: 52px;
  text-align: right;
}
</style>
